<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block th:include="include :: header('新增商品')" />
	<th:block th:include="include :: select2-css" />
	<th:block th:include="include :: summernote-css" />
	<link href="../static/css/upload.css" th:href="@{/css/upload.css}" rel="stylesheet" />
	<style type="text/css">
		.sku-image {
			display: inline-block;
			border: 1px solid #d2d6de;
			padding: 2px;
			border-radius: 4px;
			position: relative;
			width: 70px;
			height: 70px;
		}

		.sku-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.sku-image div {
			display: none;
			position: absolute;
			height: 20px;
			background: #0006;
			color: #fff;
			z-index: 10;
		}

		.sku-image:hover>div {
			display: block;
			cursor: pointer;
		}

		.sku-image>div:hover {
			background: #0008;
		}

		.sku-image .delete-sku-image {
			right: -8px;
			top: -10px;
			padding: 0 5px;
			border-radius: 50%;
		}

		.sku-image .upload-sku-image {
			left: 0;
			bottom: 0;
			width: 100%;
			text-align: center;
		}

		.select-table table label.error {
			position: inherit;
		}
	</style>
</head>

<body class="white-bg">
	<div class="wrapper wrapper-content animated ibox-content">
		<form id="form-goods-add" class="form-horizontal" action="">
			<input id="categoryId" name="categoryId" type="hidden" />
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab-goods-info" data-toggle="tab" aria-expanded="true">基本信息</a></li>
					<li><a href="#tab-detail-info" data-toggle="tab" aria-expanded="false">详情信息</a></li>
					<li><a href="#tab-delivery-info" data-toggle="tab" aria-expanded="false">物流设置</a></li>
					<li><a href="#tab-market-info" data-toggle="tab" aria-expanded="false">营销设置</a></li>
					<li><a href="#tab-other-info" data-toggle="tab" aria-expanded="false">其它设置</a></li>
				</ul>
				<input name="tableId" type="hidden" />
				<div class="tab-content">
					<div class="tab-pane active" id="tab-goods-info">
						<h4 class="form-header h4">商品信息</h4>
						<div class="row">
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label is-required">商品名称：</label>
									<div class="col-sm-10">
										<input name="goodsName" placeholder="请输入商品名称" class="form-control" type="text"
											maxlength="100" required>
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label is-required">所属分类：</label>
									<div class="col-sm-8">
										<div class="input-group">
											<input id="categoryName" onclick="selectCategoryTree()" type="text"
												placeholder="请选择所属分类" class="form-control" required> <span
												class="input-group-addon" onclick="selectCategoryTree()"><i
													class="fa fa-search"></i></span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label">商品标题：</label>
									<div class="col-sm-10">
										<input name="title" placeholder="请输入商品标题" class="form-control" type="text">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">商品单位：</label>
									<div class="col-sm-8">
										<input name="unit" placeholder="请输入商品单位" class="form-control" type="text">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">所属品牌：</label>
									<div class="col-sm-8">
										<select name="brandId" class="form-control select2">
											<option value="">无</option>
											<option th:each="brand : ${brands}" th:text="${brand.brandName}"
												th:value="${brand.brandId}"></option>
										</select>
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label is-required">排序号：</label>
									<div class="col-sm-8">
										<input name="sort" placeholder="请输入排序号" class="form-control" type="number"
											required>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label is-required">主题图：</label>
									<div class="col-sm-2">
										<div class="file-list-box">
											<div class="file-div-box">
												<input type="hidden" id="image" name="image">
												<div class="file-delete" onclick="deleteImage('image')">
													<i class="fa fa-trash-o" title="删除"></i>
												</div>
												<div class="file-upload-tools" onclick="selectImage('image')">
													<i class="fa fa-cloud-upload" title="上传"> 上传</i>
												</div>
												<img class="file-responsive" id="imageUrl" name="imageUrl"
													th:src="@{/img/upload.png}" layer-index="0" alt="" src="">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">轮播图：</label> <input type="hidden" id="images"
										name="images">
									<div class="col-sm-2">
										<input type="hidden" id="image1" name="image1"> <img class="img-sm"
											id="imageUrl1" th:src="@{/img/upload.png}" alt=""
											onclick="selectSingleMaterial1()" src="">
									</div>
									<div class="col-sm-2">
										<input type="hidden" id="image2" name="image2"> <img class="img-sm"
											id="imageUrl2" th:src="@{/img/upload.png}" alt=""
											onclick="selectSingleMaterial2()" src="">
									</div>
									<div class="col-sm-2">
										<input type="hidden" id="image3" name="image3"> <img class="img-sm"
											id="imageUrl3" th:src="@{/img/upload.png}" alt=""
											onclick="selectSingleMaterial3()" src="">
									</div>
									<div class="col-sm-2">
										<input type="hidden" id="image4" name="image4"> <img class="img-sm"
											id="imageUrl4" th:src="@{/img/upload.png}" alt=""
											onclick="selectSingleMaterial4()" src="">
									</div>
								</div>
							</div>
						</div>
						<h4 class="form-header h4">商品规格</h4>
						<div class="row">
							<div class="col-sm-12">
								<div class="form-group">
									<label class="col-sm-1 control-label is-required">规格类型：</label>
									<div class="col-sm-2">
										<label class="radio-box"> <input type="radio" name="specType" value="0"
												checked="checked" />单规格
										</label> <label class="radio-box"> <input type="radio" name="specType"
												value="1" />多规格
										</label>
									</div>
								</div>
							</div>
						</div>
						<!-- 多规格 -->
						<div class="multiSepc">
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<label class="col-sm-1 control-label is-required">商品模型：</label>
										<div class="col-sm-2">
											<select name="modelId" class="form-control"
												onchange="changeModel(this.value)">
												<option value="">请选择</option>
												<option th:each="model : ${models}" th:text="${model.modelName}"
													th:value="${model.modelId}"></option>
											</select>
										</div>
									</div>
								</div>
							</div>
							<div id="specArraysDiv"></div>
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<label class="col-sm-1 control-label"></label>
										<div class="col-sm-1">
											<div class="input-group">
												<a class="btn" onclick="addSpecItem()"><i class="fa fa-plus"></i>
													添加规格项</a>
											</div>
										</div>
										<div class="col-sm-1">
											<div class="input-group">
												<a class="btn btn-default" onclick="genSpecSku()"><i
														class="fa fa-plus"></i> 生成规格SKU</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<label class="col-sm-1 control-label">批量设置：</label>
										<div class="col-sm-10">
											<a class="btn" onclick="batchSet('price','销售价')"> 销售价</a> <a class="btn"
												onclick="batchSet('cost','成本价')"> 成本价</a> <a class="btn"
												onclick="batchSet('marketPrice','市场价')">市场价</a> <a class="btn"
												onclick="batchSet('barcode','编号')"> 编号</a> <a class="btn"
												onclick="batchSet('stock','库存数量')"> 库存数量</a> <a class="btn"
												onclick="batchSet('weight','重量')"> 重量</a> <a class="btn"
												onclick="batchSet('volume','体积')"> 体积</a>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-sm-12">
								<div class="col-sm-12 select-table table-striped">
									<table id="bootstrap-table"></table>
								</div>
							</div>
						</div>


					</div>
					<div class="tab-pane" id="tab-detail-info">
						<div class="row">
							<input type="hidden" class="form-control" id="content" name="content">
							<div class="summernote" id="summernote"></div>
						</div>
					</div>
					<!-- 物流设置 -->
					<div class="tab-pane" id="tab-delivery-info">
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">配送方式：</label>
									<div class="col-sm-8">
										<label class="check-box"> <input type="checkbox" name="deliveryType" value="0"
												checked>快递配送
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">运费设置：</label>
									<div class="col-sm-8">
										<div class="radio-box" th:each="dict : ${@dict.getType('shop_freight_type')}">
											<input type="radio" th:id="${dict.dictCode}" name="freightType"
												th:value="${dict.dictValue}" th:checked="${dict.default}"> <label
												th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row  freightAmount">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">运费金额：</label>
									<div class="col-sm-6">
										<input id="freight" name="freight" value="1" class="form-control" step="0.1"
											type="number">
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 营销设置 -->
					<div class="tab-pane" id="tab-market-info">
						<div class="row">
							<div class="col-sm-3">
								<div class="form-group">
									<label class="col-sm-4 control-label">是否热卖：</label>
									<div class="col-sm-8">
										<div class="radio-box" th:each="dict : ${@dict.getType('shop_yes_no')}">
											<input type="radio" th:id="${dict.dictCode}" name="isHot"
												th:value="${dict.dictValue}"
												th:checked="${dict.dictValue==1?'checked':''}"> <label
												th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="col-sm-4 control-label">是否新品：</label>
									<div class="col-sm-8">
										<div class="radio-box" th:each="dict : ${@dict.getType('shop_yes_no')}">
											<input type="radio" th:id="${dict.dictCode}" name="isNew"
												th:value="${dict.dictValue}"
												th:checked="${dict.dictValue==1?'checked':''}"> <label
												th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="col-sm-4 control-label">是否精品：</label>
									<div class="col-sm-8">
										<div class="radio-box" th:each="dict : ${@dict.getType('shop_yes_no')}">
											<input type="radio" th:id="${dict.dictCode}" name="isBest"
												th:value="${dict.dictValue}"
												th:checked="${dict.dictValue==1?'checked':''}"> <label
												th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-other-info">
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">上架状态：</label>
									<div class="col-sm-8">
										<div class="radio-box" th:each="dict : ${@dict.getType('shop_goods_status')}">
											<input type="radio" th:id="${dict.dictCode}" name="status"
												th:value="${dict.dictValue}" th:checked="${dict.default}">
											<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
										</div>
									</div>

								</div>
							</div>
							<div class="col-sm-4"></div>
							<div class="col-sm-4"></div>
						</div>
					</div>
				</div>
			</div>

		</form>
	</div>

	<div class="box-footer">
		<div class="col-sm-offset-5 col-sm-6">
			<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()">
				<i class="fa fa-check"></i>保 存
			</button>
			&nbsp;
			<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()">
				<i class="fa fa-reply-all"></i>关 闭
			</button>
		</div>
	</div>

	<div id="previewLayer" style="display: none; padding: 10px;">
		<img src="" id="previewImg" style="max-width: 100%;" alt="">
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" />
	<th:block th:include="include :: summernote-js" />
	<script th:inline="javascript" type="text/javascript">
		var prefix = ctx + "shop/goods";
		var fileList = [];
		var specType = 0;
		//配送类型(0快递1自提)
		var deliveryType = 0;
		//运费类型(0包邮1固定运费2运费模板)
		var freightType = 0;
		$("#form-goods-add").validate({
			ignore: "",//验证隐藏域,解决切换标签后隐藏域无法验证问题
			focusCleanup: true
		});

		$('#summernote').summernote({
			height: 600,
			lang: 'zh-CN',
			followingToolbar: false,
			dialogsInBody: true,
			callbacks: {
				onImageUpload: function (files) {
					sendFile(files[0], this);
				}
			}
		});

		// 上传文件
		function sendFile(file, obj) {
			var data = new FormData();
			data.append("file", file);
			$.ajax({
				type: "POST",
				url: ctx + "common/upload",
				data: data,
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				success: function (result) {
					if (result.code == web_status.SUCCESS) {
						$(obj).summernote('editor.insertImage', result.url, result.newFileName);
					} else {
						$.modal.alertError(result.msg);
					}
				},
				error: function (error) {
					$.modal.alertWarning("图片上传失败。");
				}
			});
		}

		var options = {
			id: 'bootstrap-table',
			pagination: false,
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			sidePagination: "client",
			columns: [
				{
					field: 'index',
					align: 'center',
					title: "序号",
					formatter: function (value, row, index) {
						var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
						var columnId = $.common.sprintf("<input type='hidden' name='goodsSkus[%s].skuId' value='%s'>", index, row.skuId);
						return columnIndex + $.table.serialNumber(index) + columnId;
					}
				},
				{
					field: 'image',
					align: 'center',
					title: '商品图片',
					formatter: function (value, row, index) {
						var html = $.common.sprintf(
							'<div class="sku-image">' +
							'<div class="delete-sku-image" onclick="deleteImage(&quot;imageSku' + index + '&quot;)">' +
							'<i class="fa fa-trash-o" title="删除"></i>' +
							'</div>' +
							'<input type="hidden" id="imageSku' + index + '" name="goodsSkus[%s].image" value="%s">' +
							'<img class="file-responsive" id="imageSku' + index + 'Url" name="imageSku' + index + 'Url" src="%s">' +
							'<div class="upload-sku-image" onclick="selectImage(&quot;imageSku' + index + '&quot;)">' +
							'<i class="fa fa-cloud-upload" title="上传"> 上传</i>' +
							'</div>' +
							'</div>', index, value, value ? value : '/img/upload.png');
						return html;
					}
				},
				{
					field: 'skuName',
					align: 'center',
					title: '规格名称',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control' type='text' name='goodsSkus[%s].skuName'  readonly='readonly' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'price',
					align: 'center',
					title: '销售价',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control price' type='text' name='goodsSkus[%s].price' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'cost',
					align: 'center',
					title: '成本价',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control cost' type='text' name='goodsSkus[%s].cost' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'marketPrice',
					align: 'center',
					title: '市场价',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control marketPrice' type='text' name='goodsSkus[%s].marketPrice' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'barcode',
					align: 'center',
					title: '商品编号',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control barcode' type='text' name='goodsSkus[%s].barcode' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'stock',
					align: 'center',
					title: '库存数量',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control stock' type='text' name='goodsSkus[%s].stock' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'weight',
					align: 'center',
					title: '重量',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control' type='text' name='goodsSkus[%s].weight' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'volume',
					align: 'center',
					title: '体积',
					formatter: function (value, row, index) {
						var html = $.common.sprintf("<input class='form-control' type='text' name='goodsSkus[%s].volume' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'opt',
					title: '操作',
					align: 'center',
					formatter: function (value, row, index) {
						var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
						return '<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="sub.delRowByIndex(&quot;' + value + '&quot;)"><i class="fa fa-remove"></i>删除</a>';
					}
				}]
		};

		$.validator.addMethod("price", function (value, element) {
			return !this.optional(element);
		}, "销售价必填");

		$.validator.addMethod("cost", function (value, element) {
			return !this.optional(element);
		}, "成本价必填");

		$.validator.addMethod("marketPrice", function (value, element) {
			return !this.optional(element);
		}, "市场价必填");

		$.validator.addMethod("stock", function (value, element) {
			return !this.optional(element) && (value <= 10000 && value > 0);
		}, "库存数量1-10000。");

		$.validator.addMethod("weight", function (value, element) {
			return !this.optional(element);
		}, "重量必填");

		$.validator.addMethod("volume", function (value, element) {
			return !this.optional(element);
		}, "体积必填");

		$(function () {
			$(".multiSepc").hide();
			createSingleSpec();
			$("input[name='specType']").on("ifChecked", function (event) {
				specType = $(event.target).val();
				if (specType == 0) {
					$(".multiSepc").hide();
					createSingleSpec();
				} else if (specType == 1) {
					$(".multiSepc").show();
					createMultiSpec();
				}
			});
			if (freightType == 1) {//固定费用
				$(".freightAmount").show();
			} else {
				$(".freightAmount").hide();
			}

			$("input[name='freightType']").on("ifChecked", function (event) {
				freightType = $(event.target).val();
				if (freightType == 1) {//固定费用
					$(".freightAmount").show();
				} else {
					$(".freightAmount").hide();
				}
			});
		});
		function createSingleSpec() {
			$.table.destroy();
			$.table.init(options);
			$.table.hideColumn('index');
			$.table.hideColumn('image');
			$.table.hideColumn('opt');
			var row = {
				index: 0,
				skuId: 0,
				skuName: '默认',
				image: "/img/upload.png",
				price: "",
				cost: "",
				barcode: "",
				marketPrice: "",
				stock: "",
				weight: 0.0,
				volume: 0.0
			}
			sub.addRow(row);
		}

		function createMultiSpec() {
			$.table.destroy();
			$.table.init(options);
		}

		function submitHandler() {
			var count = $('#bootstrap-table').bootstrapTable('getData').length;
			if (count == 0) {
				$.modal.alertError('至少有一条规格');
				return;
			}
			if ($.validate.form()) {
				var content = $('#summernote').summernote('code');
				$("#content").val(content);
				var images = "";
				var comma = "";
				if ($("#image1").val() != "") {
					images += comma + $("#image1").val();
					comma = ","
				}
				if ($("#image2").val() != "") {
					images += comma + $("#image2").val();
					comma = ","
				}
				if ($("#image3").val() != "") {
					images += comma + $("#image3").val();
					comma = ","
				}
				if ($("#image4").val() != "") {
					images += comma + $("#image4").val();
					comma = ","
				}
				$("#images").val(images);
				if (specType == 1) {//清空单规格表单
					var specItemClassList = $(".specItemClass");
					for (var i = 0; i < specItemClassList.length; i++) {
						var itemId = specItemClassList[i].id;
						var specValueClassList = $("#" + itemId).find('.specValueClass')
						var specValues = "";
						var comma = "";
						for (var j = 0; j < specValueClassList.length; j++) {
							var valueId = specValueClassList[j].id;
							specValues = specValues + comma + $("#specValue" + valueId).val();
							comma = ",";
						}
						$("#specValues" + itemId).val(specValues);
					}
				} else { //清空多规格表单
					$(".specItemClass").remove();
				}
				var length = $("input[name='deliveryType']:checked").length;
				if (length == 0) {
					$("input[name='deliveryType']").val(0);
				}
				$.operate.saveTab(prefix + "/add", $('#form-goods-add').serialize());
			}
		}

		/*分类管理-新增-选择父分类树*/
		function selectCategoryTree() {
			var options = {
				title: '分类选择',
				width: "380",
				url: ctx + "shop/goods/category/selectCategoryTree/0/0",
				callBack: doCategorySubmit
			};
			$.modal.openOptions(options);
		}
		function doCategorySubmit(index, layero) {
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			var body = $.modal.getChildFrame(index);
			$("#categoryId").val(body.find('#treeId').val());
			$("#categoryName").val(body.find('#treeName').val());
			$.modal.close(index);
		}

		function selectImage(imageFiled) {
			var options = {
				title: '素材库',
				width: 1500,
				height: 850,
				url: ctx + "shop/plugin/material/single",
				callBack: function (index, layero) {
					var url = layero.find("iframe")[0].contentWindow.getSelections();
					if (url != "") {
						$("#" + imageFiled).val(url);
						$("#" + imageFiled + "Url").attr("src", url);
						$.modal.close(index);
					}
				}
			};
			$.modal.openOptions(options);
		}

		function deleteImage(imageFiled) {
			$("#" + imageFiled).val("");
			$("#" + imageFiled + "Url").attr("src", "/img/upload.png");
		}

		function selectSingleMaterial1() {
			var options = {
				title: '素材库',
				width: "1500",
				url: ctx + "shop/plugin/material/single",
				callBack: doSingleSubmit1
			};
			$.modal.openOptions(options);
		}

		function doSingleSubmit1(index, layero) {
			var url = layero.find("iframe")[0].contentWindow.getSelections();
			if (url != "") {
				$("#image1").val(url);
				$("#imageUrl1").attr("src", url);
				$.modal.close(index);
			}
		}

		function selectSingleMaterial2() {
			var options = {
				title: '素材库',
				width: "1500",
				url: ctx + "shop/plugin/material/single",
				callBack: doSingleSubmit2
			};
			$.modal.openOptions(options);
		}

		function doSingleSubmit2(index, layero) {
			var url = layero.find("iframe")[0].contentWindow.getSelections();
			if (url != "") {
				$("#image2").val(url);
				$("#imageUrl2").attr("src", url);
				$.modal.close(index);
			}
		}

		function selectSingleMaterial3() {
			var options = {
				title: '素材库',
				width: "1500",
				url: ctx + "shop/plugin/material/single",
				callBack: doSingleSubmit3
			};
			$.modal.openOptions(options);
		}

		function doSingleSubmit3(index, layero) {
			var url = layero.find("iframe")[0].contentWindow.getSelections();
			if (url != "") {
				$("#image3").val(url);
				$("#imageUrl3").attr("src", url);
				$.modal.close(index);
			}
		}

		function selectSingleMaterial4() {
			var options = {
				title: '素材库',
				width: "1500",
				url: ctx + "shop/plugin/material/single",
				callBack: doSingleSubmit4
			};
			$.modal.openOptions(options);
		}

		function doSingleSubmit4(index, layero) {
			var url = layero.find("iframe")[0].contentWindow.getSelections();
			if (url != "") {
				$("#image4").val(url);
				$("#imageUrl4").attr("src", url);
				$.modal.close(index);
			}
		}

		function changeModel(modelId) {
			if ($.common.isNotEmpty(modelId)) {
				$.ajax({
					type: "get",
					url: ctx + "shop/goods/model/selectModelById/" + modelId,
					cache: false,
					dataType: 'json',
					success: function (result) {
						if (result.code == web_status.SUCCESS) {
							var specArrays = eval('(' + result.data.specValue + ')');
							var text = "";
							$("#specArraysDiv").html(text);
							$.each(specArrays, function (i, row) {
								text += '<div class="row specItemClass" id="' + i + '">' +
									'<div class="col-sm-12">' +
									'<div class="form-group">' +
									'<label class="col-sm-1 control-label">' + row.key + '：</label>' +
									'<input type="hidden" id="specItem' + i + '"   name="goodsAttrs[' + i + '].attrName" value="' + row.key + ' "/>' +
									'<input type="hidden" id="specValues' + i + '" name="goodsAttrs[' + i + '].attrValues" value=""/>';
								$.each(row.values, function (j) {
									text += '<div class="col-sm-1 specValueClass" id="' + i + '-' + j + '">' +
										'<div class="input-group">' +
										'<input type="text"  id="specValue' + i + '-' + j + '"  name="specValue"  class="form-control" value="' + this + '"> <span class="input-group-addon" onclick="delSpecValue(&quot;' + i + '&quot,&quot;' + i + '-' + j + '&quot;);">' +
										' <i class="fa fa-remove"></i></span>' +
										'</div>' +
										'</div>';
								})
								text += '<div class="col-sm-2">' +
									'<div class="input-group">' +
									'<a class="btn"  onclick="addSpecValue(&quot;' + i + '&quot;);"  ><i class="fa fa-plus"></i> 添加规格值</a><a class="btn btn-default" onclick="delSpecItem(&quot;' + i + '&quot;);" ><i class="fa fa-trash"></i> 删除规格</a>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>';
							})
							$("#specArraysDiv").html(text)
						} else {
							$.modal.alertError(result.msg);
						}
					},
					error: function (error) {
						$.modal.alertWarning(error);
					}
				});
			} else {
				$("#specArraysDiv").html("");
			}
		}
		//添加规格项
		function addSpecItem() {
			layer.prompt({title: '请输入规格项名称', formType: 0}, function (itemName, index) {
				layer.close(index);
				var lastItemId = 0;
				if ($("#specArraysDiv").find('.specItemClass').length > 0) {
					lastItemId = $("#specArraysDiv").find('.specItemClass').last().attr("id");
				}
				var newItemId = parseInt(lastItemId) + 1;
				var text =
					'<div class="row specItemClass" id="' + newItemId + '">' +
					'<div class="col-sm-12">' +
					'<div class="form-group">' +
					'<label class="col-sm-1 control-label">' + itemName + '：</label>' +
					'<input type="hidden" id="specItem' + newItemId + '"   name="goodsAttrs[' + newItemId + '].attrName" value="' + itemName + '">' +
					'<input type="hidden" id="specValues' + newItemId + '" name="goodsAttrs[' + newItemId + '].attrValues" value="">' +
					'<div class="col-sm-1 specValueClass" id="' + newItemId + '-0">' +
					'<div class="input-group">' +
					'<input type="text" class="form-control"  id="specValue' + newItemId + '-0"  value="" required> <span class="input-group-addon" onclick="delSpecValue(&quot;' + newItemId + '&quot,&quot;' + newItemId + '-0&quot;);">' +
					' <i class="fa fa-remove"></i></span>' +
					'</div>' +
					'</div>' +
					'<div class="col-sm-2">' +
					'<div class="input-group">' +
					'<a class="btn"  onclick="addSpecValue(&quot;' + newItemId + '&quot;);"  ><i class="fa fa-plus"></i> 添加规格值</a><a class="btn btn-default" onclick="delSpecItem(&quot;' + newItemId + '&quot;);" ><i class="fa fa-remove"></i> 删除规格</a>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>';
				if (lastItemId == 0) {
					$("#specArraysDiv").html(text);
				} else {
					$("#" + lastItemId).after(text);
				}
			});
		}
		//删除规格项
		function delSpecItem(itemId) {
			$.modal.confirm("确定删除该规格信息吗？", function () {
				$("#" + itemId).remove();
			});
		}
		//添加规格值
		function addSpecValue(itemId) {
			var lastValueId = $("#" + itemId).find('.specValueClass').last().attr("id");
			var lastNum = parseInt(lastValueId.replace(itemId + "-", ""));
			var newValueId = itemId + "-" + (lastNum + 1);
			var text =
				'<div class="col-sm-1 specValueClass" id="' + newValueId + '">' +
				'<div class="input-group">' +
				'<input type="text" class="form-control"  id="specValue' + newValueId + '"  value="" required> <span class="input-group-addon" onclick="delSpecValue(&quot;' + itemId + '&quot,&quot;' + newValueId + '&quot;);">' +
				' <i class="fa fa-remove"></i></span>' +
				'</div>' +
				'</div>';
			$("#" + lastValueId).after(text);
		}
		//删除规格值
		function delSpecValue(itemId, valueId) {
			var count = $("#" + itemId).find('.specValueClass').length;
			if (count < 2) {
				$.modal.alertWarning("至少有一个规格值");
				return;
			}
			$("#" + valueId).remove();
		}
		//生成规格sku
		function genSpecSku() {
			createMultiSpec();
			var specItemClassList = $(".specItemClass");
			var tableData = [];
			for (var i = 0; i < specItemClassList.length; i++) {
				var itemId = specItemClassList[i].id;
				tableData[i] = [];
				var specValueClassList = $("#" + itemId).find('.specValueClass')
				for (var j = 0; j < specValueClassList.length; j++) {
					var valueId = specValueClassList[j].id;
					tableData[i][j] = $("#specValue" + valueId).val();
				}
			}
			tableData = cartesianProduct(tableData);
			$.each(tableData, function (i, row) {
				var skuName = row
				if (Array.isArray(row)) {
					skuName = row.join(",")
				}
				var count = $('#bootstrap-table').bootstrapTable('getData').length;
				var data = {
					index: $.table.serialNumber(count),
					skuId: i,
					skuName: skuName,
					image: "",
					price: "",
					cost: "",
					barcode: "",
					marketPrice: "",
					stock: "",
					weight: 0.0,
					volume: 0.0
				}
				sub.addRow(data, 'bootstrap-table');
			});
		}

		//批量设置
		function batchSet(colName, title) {
			layer.prompt({title: '请输入' + title, formType: 0}, function (itemName, index) {
				layer.close(index);
				var rows = $("#bootstrap-table").bootstrapTable('getData')
				$.each(rows, function (i) {
					sub.editRow();
					$("#bootstrap-table").bootstrapTable('updateCell', {index: i, field: colName, value: itemName})
					sub.editRow();
				});
			});
		}
		//笛卡尔积生成
		function cartesianProduct(arr) {
			if (arr.length < 2) return arr[0] || [];
			return [].reduce.call(arr, function (col, set) {
				let res = [];
				col.forEach(c => {
					set.forEach(s => {
						let t = [].concat(Array.isArray(c) ? c : [c]);
						t.push(s);
						res.push(t);
					})
				});
				return res;
			});
		}
	</script>
</body>

</html>